<template>
  <div class="scenic-spot-map">
    <base-chart
      ref="chartRef"
      :option="option"
      :chartStyle="chartStyle"
    ></base-chart>
  </div>
</template>

<script>
import BaseChart from "./base-chart.vue";
import echarts from "echarts";
import { _extend } from "../util";

export default {
  components: {
    BaseChart,
  },
  props: {
    mapName: {
      type: String,
    },
    chartStyle: {
      type: Object,
    },
  },
  data() {
    return {
      option: {
        center: [121.671858, 39.150911],
        geo: {
          map: this.mapName,
          aspectScale: 0.75, //长宽比
          zoom: 1.1,
          roam: false,
          itemStyle: {
            normal: {
              areaColor: "#013C62",
              shadowColor: "#182f68",
              shadowOffsetX: 0,
              shadowOffsetY: 25,
            },
          },
        },
        series: [
          {
            type: "map",
            roam: false,
            map: this.mapName,
            zoom: 1.1,
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#fff",
                },
              },
              emphasis: {
                textStyle: {
                  color: "#fff",
                },
              },
            },
            itemStyle: {
              normal: {
                borderColor: "#2ab8ff",
                borderWidth: 1.5,
                areaColor: "#12235c",
              },
              emphasis: {
                areaColor: "#182f68",
                borderWidth: 1.5,
                color: "green",
              },
            },
          },
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            showEffectOn: "render",
            rippleEffect: {
              period: 15,
              scale: 4,
              brushType: "fill",
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: "#ffff",
                shadowBlur: 10,
                shadowColor: "#333",
              },
            },
            data: [],
          },
        ],
      },
    };
  },
  methods: {
    drew(source = {}, pointList = [], customOption = {}) {
      this.option.series[1].data = pointList;

      echarts.registerMap(this.mapName, source);

      // 先合并配置，再合并数据
      this.option = this.customOption
        ? _extend(customOption, this.option)
        : this.option;
      console.log("this.option", this.option);
    },
  },
};
</script>
